<template>
	<view class="more-container">
		<u-navbar bgColor="#000000" autoBack height="90" placeholder fixed>
			<view class="u-nav-slot" slot="center">
				<!-- 正文内容 -->
				<text style="font-size: 46rpx;font-weight: bold;">跑步</text>
			</view>
		</u-navbar>
		<view class="more-content">
			<navigator class="more-item" v-for="(item,index) in list" :key="index" :url="item.path">
				<view class="item-left">
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						img:"../../static/imgs/pb.png",
						name:"跑步",
						path:"./running"
					},
					{
						img:"../../static/imgs/yj.png",
						name:"瑜伽",
						path:"./yoga"
					},
					{
						img:"../../static/imgs/zb.png",
						name:"直播",
						path:"./liver"
					},
					{
						img:"../../static/imgs/qx.png",
						name:"骑行"
					},
					{
						img:"../../static/imgs/dz.png",
						name:"练动作"
					},
					{
						img:"../../static/imgs/xz.png",
						name:"行走"
					},
					{
						img:"../../static/imgs/hd.png",
						name:"活动挑战"
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.more-container {
		height: 100%;
		background-color: #000000;
		padding: 0 35rpx;
		overflow-y: auto;

		.more-content {
			.more-item {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				justify-content: space-between;
				padding: 27rpx 40rpx;
				border-radius: 10rpx;
				background: #262626;
				.item-left{
					display: flex;
					align-items: center;
					font-size: 36rpx;
					image{
						width: 53rpx;
						height: 59rpx;
						margin-right: 40rpx;
					}
				}
			}
		}
	}
</style>
